<template>
  <div class="invoice_his">
    <div class="search_box">
      <div class="type_box">
        <span>类型</span>
        <el-select style="margin-left: 13px;width:65px " v-model="formData.type" placeholder="请选择">
          <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.status"
              :value="item.id">
          </el-option>
        </el-select>

      </div>
      <div>
        <span>审核状态:0</span>
      </div>
      <div style="display: flex;width: 33%">
        <el-input v-model="formData.text" size="mini"></el-input>
        <el-button style="margin-left: 10px" size="mini" type="primary">搜索</el-button>
      </div>
      <router-link class="jump_apy" to="/personCenter/demand_rel">发布需求信息>></router-link>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        border
        height="500"
    >
      <el-table-column
          v-for="item of tableAry"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align='item.align'
          :key="item.prop"
      >
        <div slot-scope="scope">
          {{scope.row[item.prop]}}
        </div>
      </el-table-column>
    </el-table>
    <img class="img_tip" src="https://tva1.sinaimg.cn/large/0081Kckwly1gl3oufim9pj30xh0r4wkg.jpg" alt="img">
  </div>
</template>

<script>
  const tableAry = [
    {
      prop: 'title',
      label: '标题',
      width: '240',
      align: 'left'
    },
    {
      prop: 'date',
      label: '发布时间',
    },
    {
      prop: 'type',
      label: '类型',
      width: '100',
    },
    {
      prop: 'area',
      label: '地区',
      width: '100',
    },
    {
      prop: 'status',
      label: '操作',
      align: 'right',
      width: '90',
    }
  ]
  export default {
    name: "",
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            title: '北苑学生宿舍18号楼（15、16号楼改扩建）工程设计项目(20C\n' +
              '00758)竞争性磋商公告北苑学生宿舍18号楼',
            type: '招标公告',
            area: '河北-邯郸',
            status: '提交(已发布)',
          },
          {
            date: '2016-05-02',
            title: '北苑学生宿舍18号楼（15、16号楼改扩建）工程设计项目(20C\n' +
              '00758)竞争性磋商公告北苑学生宿舍18号楼',
            type: '招标公告',
            area: '河北-邯郸',
            status: '提交(已发布)',
          },
        ],
        formData: {
          type: 1,
          text: ''
        },
        tableAry,
        typeList: [
          {
            status: '完成',
            id: 1

          },
          {
            status: '进行中',
            id: 2
          },
          {
            status: '失败',
            id: 3
          }
        ]

      }
    }
  }
</script>

<style scoped lang="scss">
  .invoice_his {
    .search_box {
      height: 54px;
      background: #EEEEEE;
      box-shadow: 0px 1px 3px 0px rgba(172, 169, 169, 0.64);
      border-radius: 3px 3px 0px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;

      ::v-deep .el-button--mini {
        padding: 4px 7px;
        background-color: #2D80B4;
      }

      .type_box {
        ::v-deep .el-input__inner {
          padding: 0;
          text-align: center;
          border: 1px #2D80B4 dashed;
          background: rgba(255, 255, 255, 0.8);
        }

        ::v-deep .el-select__caret {
          display: none;
        }
      }

      span {
        font-size: 15px;
        font-weight: 400;
        color: #333333;
      }

      .jump_apy {
        width: 88px;
        height: 12px;
        font-size: 12px;
        color: #2D80B4;
        line-height: 12px;
        text-decoration: none;
      }
    }

    .account_card {
      background: #EDD9B6;
      margin-bottom: 11px;
    }

    ::v-deep th {
      background: #F6F6F6;

      .cell {
        font-weight: 500;
      }
    }

    .img_tip {
      margin-top: 10px;
      width: 100%;
      height: 43px;
      background: #DFDFDF;
      border-radius: 3px;
    }

  }
</style>